<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/22
  Time: 10:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>影片分类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>开启头部工具栏</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>

                    <script type="text/html" id="test-table-toolbar-toolbarDemo">
                        <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                            搜索类型：
                            <div class="layui-inline">
                                <input class="layui-input" name="id" id="searchFilmTypeName" autocomplete="off">
                            </div>
                            <button class="layui-btn" data-type="reload" id="search" >搜索</button>
                        </div>
                        <div class="layui-btn-container">
                            <button type="button" id="insertFilmType" class="layui-btn"><i class="layui-icon"></i> 添加</button>
                            <button type="button" id="exportFilmType" class="layui-btn layui-btn-radius">导出eccel文件</button>

                        </div>
                    </script>

                    <script type="text/html" id="test-table-toolbar-barDemo">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i></button>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/back/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/back/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form'], function(){
        var admin = layui.admin
            ,table = layui.table // 表格
            ,layer = layui.layer // 弹层
            ,form = layui.form // form表单
            ,$ = layui.$; // $


        var cols = [[ // 表头
             {field:'filmTypeName', title:'影片类型名称', width:200, edit: 'text'}
            ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150}
        ]];

        // 执行一个table实例
        table.render({
            elem: '#test-table-toolbar' // 数据渲染的位置
            ,url: '${pageContext.request.contextPath}/back/filmTypes' // 数据接口
            ,where:{pageNum:'1',pageSize:'30',filmTypeName:null} // 条件
            ,toolbar: '#test-table-toolbar-toolbarDemo' // 开启头部工具栏
            ,title: '影片类型数据表'
            ,cols: cols
            ,page: true // 开启分页
            ,parseData: function (res) {
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.list //解析数据列表
                }
            }
        });

        //监听行工具事件
        // 删除事件
        table.on('tool(test-table-toolbar)', function(obj){
            var data = obj.data; //获得当前行数据
            var filmTypeId = data.filmTypeId;
            if(obj.event === 'del'){
                layer.confirm('您确定删除类型名称：'+data.filmTypeName+'的数据吗？', function(index){
                   //向服务端发送删除指令，在这里可以使用Ajax异步
                    $.ajax({
                        type:'delete'
                        ,url:'${pageContext.request.contextPath}/back/deleteFilmType/' + filmTypeId
                        ,dataType:'json'
                        ,success:function (result) {
                           if (result == true) { //删除成功，刷新当前页表格
                                //删除对应行（tr）的DOM结构，并更新缓存
                                obj.del();
                                layer.close(index);
                               window.location.reload();
                           } else if (result == false) { //删除失败
                                layer.alert("删除失败");
                           }
                       }
                   })
                });
            // 修改事件
            } else if(obj.event === 'edit'){
                index = layer.open({
                    type : 1,
                    area: ['350px','300px'],
                    content: $("#edit_from")
                });
                // 表单初始赋值
                form.val('example',{
                    "filmTypeId" : data.filmTypeId
                    ,"filmTypeName" : data.filmTypeName
                });
            }
        });

        $ = layui.jquery;
        // 执行真正的修改事件
        $(document).on("click","#onEditFilmType",function () {
            var filmTypeId = $("#example input[name=filmTypeId]").val();
            var filmTypeName = $("#example input[name=filmTypeName]").val();
            $.ajax({
                type:'put'
                ,url:'${pageContext.request.contextPath}/back/updateFilmType'
                ,data:{filmTypeId:filmTypeId,filmTypeName:filmTypeName}
                ,dataType: 'json'
                ,success:function (result) {
                    if (result == true) {
                        layer.close(index);
                        window.location.reload();
                    } else {
                        layer.alert("修改失败");
                    }
                }
            });
        });
        // 添加事件/打开模态框/赋值
        $(document).on("click","#insertFilmType",function () {
            // 打开隐藏的增加表单
            index = layer.open({
                type : 1,
                area: ['350px','300px'],
                content: $("#add_from")
            });
        });
        // 执行真正的添加事件
        $(document).on("click","#onAddFilmType",function () {
            var filmTypeName = $("#addFilmType input[name=filmTypeName]").val();
            $.ajax({
                type:'post'
                ,url:'${pageContext.request.contextPath}/back/insertFilmType'
                ,data:{filmTypeName:filmTypeName}
                ,dataType: 'json'
                ,success:function (result) {
                    if (result == true) {
                        layer.close(index);
                        window.location.reload();
                    } else {
                        layer.alert("添加失败");
                    }
                }
            });
        });
        // 条件查询
        $(document).on("click","#search",function () {
            var filmTypeName = $("#searchFilmTypeName").val();
            table.render({
                elem: '#test-table-toolbar' // 数据渲染的位置
                ,url: '${pageContext.request.contextPath}/back/filmTypes' // 数据接口
                ,where:{pageNum:'1',pageSize:'20',filmTypeName:filmTypeName} // 条件
                ,toolbar: '#test-table-toolbar-toolbarDemo' // 开启头部工具栏
                ,title: '影片类型数据表'
                ,cols: cols
                ,page: true // 开启分页
                ,parseData: function (res) {
                    return {
                        "code": 0, //解析接口状态
                        "msg": "", //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.list //解析数据列表
                    }
                }
            });

        });

        // 文件导出
        // 导出影片类型信息表
        $(document).on("click","#exportFilmType",function (ev) {
            location.href = "${pageContext.request.contextPath}/back/exportFilmType";
        });

    });
</script>
<%--<script>
    document.getElementById("btn").onclick = function (ev) {
        location.href = "/exportArticleDataManageList";
    }
</script>--%>
    <!-- 放置添加元素，默认隐藏 -->
    <div id="add_from" style="display:none;width:300px;margin-top: 20px">
        <form class="layui-form" action="javascript:return false;" lay-filter="addFilmType" id="addFilmType">
            <div class="layui-form-item">
                <label class="layui-form-label">类型名称</label>
                <div class="layui-input-block">
                    <input type="text" name="filmTypeName" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="onAddFilmType">确认</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 放置修改元素，默认隐藏 -->
    <div id="edit_from" style="display:none;width:300px;margin-top: 20px">
        <form class="layui-form" action="javascript:return false;" lay-filter="example" id="example">
            <div class="layui-form-item" style="display:none">
                <label class="layui-form-label">类型编号</label>
                <div class="layui-input-block">
                    <input type="text" name="filmTypeId" lay-verify="filmTypeId" autocomplete="off"
                           class="layui-input" readonly="readonly">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型名称</label>
                <div class="layui-input-block">
                    <input type="text" name="filmTypeName" lay-verify="filmTypeName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="onEditFilmType">确定修改</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
